<template>
    <div>
        <el-header>
            <div style="float:left">
                <el-form size="mini" :inline="true" :model="formInline">
                    <el-form-item label="开始">
                        <el-date-picker v-model="formInline.beginDate" type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss" style="width:180px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="出院病区">
                        <el-select v-model="formInline.hospitalWard" placeholder="请选择" class="option">
                            <el-option v-for="item in hospitalWards" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="病区">
                        <el-select v-model="formInline.patientArea" placeholder="请选择" class="option">
                            <el-option v-for="item in patientAreas" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="血液大类">
                        <el-select v-model="formInline.bloodType" placeholder="请选择" class="option">
                            <el-option v-for="item in bloodTypes" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label>
                        <el-button type="primary" @click="exportData()">EXCEL导出</el-button>
                        <el-button type="primary" @click="printData()">纵向打印</el-button>
                        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-form size="mini" :inline="true" :model="formInline">
                    <el-form-item label="截至">
                        <el-date-picker v-model="formInline.endDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                            style="width:180px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="出库科室">
                        <el-select v-model="formInline.warehouseOrg" placeholder="请选择" class="option">
                            <el-option v-for="item in warehouseOrgs" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类别">
                        <el-select v-model="formInline.typeInfo" placeholder="请选择" class="option">
                            <el-option v-for="item in typeInfos" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="不显示列">
                        <el-select v-model="formInline.noFiled" placeholder="请选择" class="filedoption">
                            <el-option v-for="item in noFileds" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label>
                        <el-button type="primary" @click="printData()">打印</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-header>
        <el-main style="padding:70px 5px;clear:both">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="科室用血明细" name="first">
                    <orgUseBloodCase :tableData='tableData'></orgUseBloodCase>
                </el-tab-pane>
                <el-tab-pane label="鉴定明细" name="second"></el-tab-pane>
                <el-tab-pane label="配血明细" name="third"></el-tab-pane>
                <el-tab-pane label="发血明细" name="fourth"></el-tab-pane>
            </el-tabs>
        </el-main>
    </div>
</template>
<script>
    import orgUseBloodCase from '../components/useBloodCase/orgUseBloodCase'
    export default {
        data() {
            return {
                formInline: {
                    beginDate: "",
                    endDate: "",
                    hospitalWard: "", //出院病区
                    patientArea: "", //病区
                    bloodType: "", //血液大类
                    warehouseOrg: "", //出库科室
                    typeInfo: '',//类别
                    noFiled: '',//不显示列
                },
                selectTypeVal: 0,
                activeName: 'first',
                // total: 100,
                // PageIndex: 1,
                // PageSize: 30,
                hospitalWards: [
                    {
                        lable: 1,
                        value: "出院病区一",
                    },
                    {
                        lable: 2,
                        value: "出院病区二",
                    },
                ],
                patientAreas: [
                    {
                        lable: 1,
                        value: "病区一",
                    },
                    {
                        lable: 2,
                        value: "病区二",
                    },
                ],
                bloodTypes: [
                    {
                        lable: "1",
                        value: "血液大类一",
                    },
                    {
                        lable: "2",
                        value: "血液大类二",
                    },
                ],
                warehouseOrgs: [
                    {
                        lable: 1,
                        value: "出库科室一",
                    },
                    {
                        lable: 2,
                        value: "出库科室二",
                    },
                ],
                typeInfos: [
                    {
                        lable: 1,
                        value: "类别一",
                    },
                    {
                        lable: 2,
                        value: "类别二",
                    }
                ],
                noFileds: [
                    {
                        lable: 1,
                        value: "不显示列一",
                    },
                    {
                        lable: 2,
                        value: "不显示列二",
                    }
                ],
                tableData: [],
                height: window.innerHeight - 60 - 20 - 56 - 47 * 2 - 90,
            };
        },
        //页面加载事件
        mounted() {
        },
        methods: {
            handleClick(tab, event) {
                //console.log(tab, event);
            },
            selectType(val) {

            },
            search() {
                this.tableData = [];
                let url = '';
                switch (this.activeName) {
                    case 'first': url = '';
                        break;
                    case 'second': url = '';
                        break;
                    case 'third': url = '';
                        break;
                    case 'fourth': url = '';
                        break;
                }
                this.tableData.push({
                    orgName: "内一科",
                    zrc: "10",
                    zrs: "1",
                    sqlhb: "100",
                    sqlhbzl: "10",
                    sntqsql: "01",
                    shqtb: "01",
                    sqltbzl: "45",
                    sxl: "45",
                    sytqsxl: "45",
                    sxlhb: "12",
                    sxlhbzl: "45",
                    sntqsxl: "25",
                    sxltb: "42",
                    sxltbzl: "445",
                    sqlsxl: "25",
                });
                console.log(this.activeName);
            },
            exportData() {
                console.log("导出");
            },
            printData() {
                console.log("打印");
            },
        },
        components: {
            orgUseBloodCase
        }
    };
</script>
<style scoped>
    .option {
        width: 130px;
    }

    .buttonType {
        height: 100px;
    }

    .searchDiv {
        float: left;
        margin-left: 10px;
    }

    .el-main {
        padding: 10px 5px !important;
    }

    .filedoption {
        width: 330px;
    }
    .el-form{
        height:34px
    }
</style>